<template>
  <!-- <el-badge placement="bottom" trigger="click" type="danger" :value="badge"> -->
  <el-popover placement="bottom" trigger="click" :width="500">
    <template #reference>
      <el-badge class="item w-6 mr-2" :value="badge">
        <vui-icon class="mr-2" icon="mail-line" style="color: #fff" />
      </el-badge>
    </template>
    <div class="notice-msg w-full">
      <div class="notice-msg-top">
        <p>{{ translateTitle('Base.baseAdmin.通知') }}</p>
        <el-button class="clear-btn" type="text" @click="handleClearNotice">{{ translateTitle('Base.baseAdmin.清空') }}</el-button>
      </div>
      <div v-if="notices.length > 0" class="notice-msg-list">
        <ul class="list-inner">
          <li v-for="(item, index) in notices" :key="index" class="list-inner-item" @click="toPath(item)">
            <!-- <el-avatar :size="45" :src="item.image" /> -->
            <div>
              <p class="msg-content">{{ item.CONTENT }}</p>
              <p class="msg-type">{{ item.SUBJECT }}</p>
            </div>
            <p class="msg-time">{{ item.ADDTIME }}</p>
            <div>
              <el-button class="clear-read" type="text" @click.stop="setRead(item)">{{ translateTitle('Base.baseAdmin.标为已读') }}</el-button>
            </div>
          </li>
        </ul>
      </div>
      <el-empty v-else class="notice-msg-list" :description="translateTitle('Base.baseAdmin.暂无通知')" />
    </div>
    <div class="notice-clear" @click="lookAll">
      <el-button type="text">
        <span>{{ translateTitle('Base.baseAdmin.查看全部') }}</span>
      </el-button>
    </div>
  </el-popover>
  <!-- </el-badge> -->
</template>

<script>
  import { computed, defineComponent, getCurrentInstance, nextTick, ref, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { translateTitle } from '@/utils/i18n'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'

  export default defineComponent({
    name: 'VuiNotice',
    setup() {
      const apiList = [
        {
          code: 'WMS',
          method: {
            query: 'wms.warning.info.query',
            clear: 'wms.warning.info.clear',
            smenucode: 'wms.warning.query.smenucode',
            read: 'wms.warning.info.read',
          },
        },
        {
          code: 'WCS',
          method: {
            query: 'lcs.warning.info.query',
            clear: 'lcs.warning.info.clear',
            smenucode: 'lcs.warning.query.smenucode',
            read: 'lcs.warning.info.read',
          },
        },
      ]

      const store = useStore()

      const theme = computed(() => store.getters['settings/theme'])
      const appCode = computed(() => store.getters['user/appCode'])
      const { proxy } = getCurrentInstance()
      const url = GFCD(appCode.value.toLowerCase()).domain + GFCD(appCode.value.toLowerCase()).baseUrl
      const timer = ref(null)
      const activeName = ref('notice')
      const notices = ref([])
      const badge = ref()
      const router = useRouter()
      const methodObj = apiList.find((el) => el.code === appCode.value).method
      const fetchData = async () => {
        const method = methodObj.query
        const { data } = await request({
          url: url,
          method: 'post',
          data: {
            method,
            data: JSON.stringify({ '#LIMIT#': '1', '#PAGE_SIZE#': '10' }),
          },
          notOpenMessage: true,
        })
        notices.value = data[method].data
        badge.value = data[method].count
      }
      const timeOut = GFCD('common').earlyWarningTime || 10000
      // 轮询请求接口
      const getlunxunData = () => {
        timer.value = setInterval(() => {
          setTimeout(() => {
            fetchData()
          }, 0)
        }, timeOut)
      }
      nextTick(() => {
        fetchData()
        getlunxunData()
      })

      const handleClearNotice = async () => {
        const method = methodObj.clear
        const { data } = await request({
          url: url,
          method: 'post',
          data: {
            method,
            data: JSON.stringify({}),
          },
        })
        console.log(data)
        notices.value = []
        badge.value = 0
        proxy.$baseMessage(translateTitle('Base.baseAdmin.清空消息成功'), 'success', 'vui-hey-message-success')
      }
      const lookAll = () => {
        const path = GFCD('common').earlyWarningPath
        router.push(path)
      }
      const toPath = async (item) => {
        const method = methodObj.smenucode
        let path = ''
        if (item.MENU_ID) {
          const { data } = await request({
            url: url,
            method: 'post',
            data: {
              method,
              data: JSON.stringify({ MENU_CODE: item.MENU_ID, '#LIMIT#': '1', '#PAGE_SIZE#': '10' }),
            },
          })
          console.log(data)
          path = `/${data[method].data[0].MENU_SCODE}/${item.MENU_ID}`
        } else {
          path = GFCD('common').earlyWarningPath
        }
        await setRead(item)
        router.push(path)
      }
      const setRead = async (item) => {
        const method = methodObj.read
        console.log('setRead', item)
        await request({
          url: url,
          method: 'post',
          data: {
            method,
            data: JSON.stringify({ MESSAGE_ID: item.MESSAGE_ID }),
          },
        })
        fetchData()
      }
      onUnmounted(() => {
        clearInterval(timer.value)
      })
      return {
        badge,
        theme,
        notices,
        fetchData,
        activeName,
        translateTitle,
        handleClearNotice,
        lookAll,
        setRead,
        toPath,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .notice-msg {
    height: 400px;
    .notice-msg-top {
      position: relative;
      height: 56px;
      font-size: 16px;
      text-align: center;
      line-height: 56px;
      border-bottom: 1px solid #dcdcdc;
      .clear-btn {
        position: absolute;
        top: 17px;
        right: 24px;
      }
    }
    .notice-msg-list {
      height: calc(100% - 104px);
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: auto;
      scrollbar-width: thin;
      .list-inner {
        list-style: none;
        padding: 0;
        margin: 0;
        .list-inner-item {
          overflow: hidden;
          width: 100%;
          padding: 16px 24px;
          font-size: 14px;
          line-height: 22px;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          &:hover {
            color: blue;
            background: #f3f3f3;
          }
          &:hover .msg-time {
            display: none;
          }
          &:hover .clear-read {
            display: block;
          }
          .msg-content {
            margin-bottom: 16px;
          }
          .msg-type {
            color: rgba(0, 0, 0, 0.6);
          }
          .msg-time {
            transition: all 0.2s ease;
            opacity: 1;
            position: absolute;
            right: 24px;
            bottom: 16px;
            color: rgba(0, 0, 0, 0.6);
          }
          .clear-read {
            transition: all 0.2s ease;
            opacity: 1;
            position: absolute;
            right: 24px;
            bottom: 16px;
            display: none;
          }
        }
        .list-inner-item:after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background: #e7e7e7;
        }
      }
    }
    .notice-msg-bottom {
      height: 48px;
      align-items: center;
      display: flex;
      justify-content: center;
    }
  }
  .notice-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 0;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #e8eaec;

    i {
      margin-right: 3px;
    }
  }
</style>
